<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.css">
		<link rel="stylesheet" href="../css/contact.css">
		<link rel="stylesheet" href="../css/animate.css">
		<style>
			.mui-search .mui-placeholder {
			    line-height: 26px !important;
			}
		</style>
	</head>

	<body>
		<div id="content" class="mui-content">
			<ul class="mui-table-view" style="margin-top: 0px;">
				<li class="mui-media" style="padding: 5px 5px;">
					<div class="mui-input-row mui-search">
						<input id="searchContact" onfocus="searchForcus()" type="search" class="mui-input-clear" placeholder="" style="height: 26px;">
					</div>
					<ul class="mui-table-view mui-grid-view mui-grid-9 contact-head">
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4 animated flipInX noborder">
							<a href="#">
								<span class="mui-icon contact-bkgimg cantact-chat-regent">&nbsp;</span>
								<div class="mui-media-body">最近联系</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4 animated flipInX noborder" style="animation-delay: 0.1s;">
							<a href="#">
								<span class="mui-icon contact-bkgimg contact-chat-care">&nbsp;</span>
								<div class="mui-media-body">特别关心</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4 animated flipInX noborder" style="animation-delay: 0.3s">
							<a href="#">
								<span class="mui-icon contact-bkgimg contact-chat-group">&nbsp;</span>
								<div class="mui-media-body">群组</div>
							</a>
						</li>
					</ul>
				</li>
			</ul>

			<ul id="contactContainer" class="mui-table-view mui-collapse contact-group" style="margin-top: 10px;">

				<li class="mui-table-view-cell mui-collapse animated fadeInRight" style="animation-delay: 0.1s;">
					<a href="#" class="mui-navigate-right mui-navigate-left"><span>中原区域</span><span>3/5</span></a>
					<div class="mui-collapse-content">
						<ul class="mui-table-view mui-table-view-chevron contact-list-ul">
							<li class="mui-table-view-cell mui-media">
								<a class="mui-navigate-right">
									<img class="mui-media-object mui-pull-left contact-person-img" src="../img/man.png">
									<div class="mui-media-body contact-person-font boy">
										金桐宇
										<span style="padding-left: 10px;"><img width="15px" height="15px" src="../img/common/boy.png"/></span>
										<span class="tel">
											18678837411
										</span>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</li>
				<li class="mui-table-view-cell mui-collapse animated fadeInRight" style="animation-delay: 0.2s;">
					<a href="#" class="mui-navigate-right mui-navigate-left"><span>新疆区域</span><span>3/5</span></a>
					<div class="mui-collapse-content">
						<ul class="mui-table-view mui-table-view-chevron contact-list-ul">
							<ul class="mui-table-view mui-table-view-chevron contact-list-ul">
							<li class="mui-table-view-cell mui-media">
								<a class="mui-navigate-right">
									<img class="mui-media-object mui-pull-left contact-person-img" src="../img/man.png">
									<div class="mui-media-body contact-person-font boy">
										金桐宇
										<span><img width="15px" height="15px" src="../img/common/boy.png"/></span>
										<span class="tel">
											18678837411
										</span>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a class='mui-navigate-right' href="javascript:;">
									<img class="mui-media-object mui-pull-left contact-person-img" src="../img/man.png">
									<div class="mui-media-body contact-person-font boy">
										吴良宝
										<span><img width="15px" height="15px" src="../img/common/boy.png"/></span>
										<span class="tel">
											18678837411
										</span>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a class="mui-navigate-right">
									<img class="mui-media-object mui-pull-left contact-person-img" src="../img/man.png">
									<div class="mui-media-body contact-person-font girl">
										大跃跃
										<span><img width="15px" height="15px" src="../img/common/girl.png"/></span>
										<span class="tel">
											18678837411
										</span>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</li>
				<li class="mui-table-view-cell mui-collapse animated fadeInRight" style="animation-delay: 0.3s;">
					<a href="#" class="mui-navigate-right mui-navigate-left"><span>成都区域</span><span>3/5</span></a>
					<div class="mui-collapse-content">
						<ul class="mui-table-view mui-table-view-chevron contact-list-ul">
							<li class="mui-table-view-cell mui-media">
								<a class="mui-navigate-right">
									<img class="mui-media-object mui-pull-left contact-person-img" src="../img/man.png">
									<div class="mui-media-body contact-person-font boy">
										金桐宇
										<span><img width="15px" height="15px" src="../img/common/boy.png"/></span>
										<span class="tel">
											18678837411
										</span>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a class='mui-navigate-right' href="javascript:;">
									<img class="mui-media-object mui-pull-left contact-person-img" src="../img/man.png">
									<div class="mui-media-body contact-person-font boy">
										吴良宝
										<span><img width="15px" height="15px" src="../img/common/boy.png"/></span>
										<span class="tel">
											18678837411
										</span>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a class="mui-navigate-right">
									<img class="mui-media-object mui-pull-left contact-person-img" src="../img/man.png">
									<div class="mui-media-body contact-person-font girl">
										大跃跃
										<span><img width="15px" height="15px" src="../img/common/girl.png"/></span>
										<span class="tel">
											18678837411
										</span>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</li>
				<li class="mui-table-view-cell mui-collapse animated fadeInRight" style="animation-delay: 0.4s;">
					<a href="#" class="mui-navigate-right mui-navigate-left"><span>江汉区域</span><span>3/5</span></a>
					<div class="mui-collapse-content">
						<ul class="mui-table-view mui-table-view-chevron contact-list-ul">
							<li class="mui-table-view-cell mui-media">
								<a class="mui-navigate-right">
									<img class="mui-media-object mui-pull-left contact-person-img" src="../img/man.png">
									<div class="mui-media-body contact-person-font boy">
										金桐宇
										<span><img width="15px" height="15px" src="../img/common/boy.png"/></span>
										<span class="tel">
											18678837411
										</span>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a class='mui-navigate-right' href="javascript:;">
									<img class="mui-media-object mui-pull-left contact-person-img" src="../img/man.png">
									<div class="mui-media-body contact-person-font boy">
										吴良宝
										<span><img width="15px" height="15px" src="../img/common/boy.png"/></span>
										<span class="tel">
											18678837411
										</span>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a class="mui-navigate-right">
									<img class="mui-media-object mui-pull-left contact-person-img" src="../img/man.png">
									<div class="mui-media-body contact-person-font girl">
										大跃跃
										<span><img width="15px" height="15px" src="../img/common/girl.png"/></span>
										<span class="tel">
											18678837411
										</span>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</li>
				<li class="mui-table-view-cell mui-collapse animated fadeInRight" style="animation-delay: 0.5s;">
					<a href="#" class="mui-navigate-right mui-navigate-left"><span>财务部</span><span>3/5</span></a>
					<div class="mui-collapse-content">

					</div>
				</li>
				<li class="mui-table-view-cell mui-collapse animated fadeInRight" style="animation-delay: 0.6s;">
					<a href="#" class="mui-navigate-right mui-navigate-left"><span>总裁办</span><span>3/5</span></a>
					<div class="mui-collapse-content">

					</div>
				</li>
				<li class="mui-table-view-cell mui-collapse animated fadeInRight" style="animation-delay: 0.7s;">
					<a href="#" class="mui-navigate-right mui-navigate-left"><span>研发部</span><span>3/5</span></a>
					<div class="mui-collapse-content">

					</div>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript" src="../js/mui.min.js"></script>
	<script type="text/javascript" src="../js/jquery.js"></script>
	<script type="text/javascript" src="../js/jquery.json.js" ></script> 
	<script type="text/javascript" src="../js/pan_config.js" ></script>
	<script type="text/javascript" src="../js/contact.js"></script>
</html>